<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="../jquery.js"></script>
</head>
<style>
#controlbox{ margin:0 auto; position:relative;}
#controlbox div{ position:absolute; width:100%; height:100%; top:0; left:0; transition:all 2s linear;
 -webkit-transition:all 2s linear;
      -ms-transition:all 2s linear;
      -o-transition:all 2s linear;
	  transform:rotate(0deg)
	  }
#controlbox .img{transition:all 2s linear; transform:rotate(30deg)}
#controlbox:hover .img{transform:rotate(0deg)}
#mymove{
	animation:mymove 3s linear;
	
	}
@keyframes mymove
{
0% {}
25% {top:100px; transform:skew(15deg)}
50% {top:150px;transform:skew(-15deg)}
75% {top:200px;transform:skew(15deg)}
100% {top:250px;transform:skew(-15deg);animation-fill-mode: forwards;}
}

</style>
<body>
<div id="controlbox">
<canvas id="canvas" style="border:1px solid #000;"></canvas>
</div>
<!--<div id="img"></div>-->
<input type="button"  id="btn_reset" value="重绘">
<input type="button"  id="btn_save" value="保存">
</body>
<script>
 init()
 window.objarr=[];
function init() {
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var canvasWidth=Math.min(500,$(window).width()-30);
    var canvasHeight=canvasWidth;
    var isMouseDown=false; // 鼠标按下flag
    var lastPos={x:0,y:0}; // 历史位置
    var defaultFontColor="#000000"; // 默认绘制字体颜色
    canvas.width=canvasWidth;// 设置画布大小
    canvas.height=canvasHeight;
    $("#controlbox").css("width",canvasWidth);
    function drawFont(lastPos,curpos) {
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(lastPos.x,lastPos.y);
        ctx.lineTo(curpos.x,curpos.y);
        ctx.lineCap="round";
        ctx.lineJoin="round";
        ctx.strokeStyle=defaultFontColor;
        ctx.lineWidth=5;
        ctx.stroke();
        ctx.restore();
    }
    
    function getCanvasCoord(position,obj) {// 计算鼠标相对于canvas的坐标
        var canvasOffset=obj.getBoundingClientRect(); // 返回元素的大小及其相对于视口的位置
        return {x:Math.round(position.x-canvasOffset.left),y:Math.round(position.y-canvasOffset.top),time:new Date().getTime()};
    }
    function drawStart(ev) {// 开始绘制
        isMouseDown=true;//开始绘制标志
        lastPos=getCanvasCoord({x:ev.clientX,y:ev.clientY},canvas);//获取鼠标位置
		objarr.push([]);//重新创建一个路径
		objarr[objarr.length-1].starttime=new Date().getTime()
		objarr[objarr.length-1].push(getCanvasCoord({x:ev.clientX,y:ev.clientY},canvas));
    }   
    function drawMove(ev) { // 绘制中
        var curpos=getCanvasCoord({x:ev.clientX,y:ev.clientY},canvas);
        drawFont(lastPos,curpos);
        lastPos=curpos;
		objarr[objarr.length-1].push(getCanvasCoord({x:ev.clientX,y:ev.clientY},canvas));
		  
    }    
    $("#btn_reset").click(function () {// 清除画布
	  ctx.clearRect(0,0,canvasWidth,canvasHeight);    
    });
    // PC端的鼠标事件
    canvas.addEventListener("mousedown",function (ev) {
        var ev=ev?ev:window.event;
        drawStart(ev);
    },false);
    canvas.addEventListener("mousemove",function (ev) {
        var ev=ev?ev:window.event;
        if (isMouseDown) {
            drawMove(ev);
        }
    },false);
    canvas.addEventListener("mouseup",function () {
         isMouseDown=false;
		 objarr[objarr.length-1].endtime=new Date().getTime()
		 console.log(objarr)
       // lastLineWidth=-1; // 鼠标抬起，恢复线宽
    },false);
    canvas.addEventListener("mouseout",function () {
         isMouseDown=false;;
    },false);
	$('#btn_save').click(function(){
		/*
		var src=canvas.toDataURL();
		$('#img').append('<img id="mymove" src="'+src+'">');
		*/
		ctx.clearRect(0,0,canvasWidth,canvasHeight);
		var i=1;
		var j=0;
		function auto_draw(time){
			setTimeout(function(){
			var time=objarr[j][i].time-objarr[j][i-1].time;
			drawFont(objarr[j][i-1],objarr[j][i]);
			i++;
			if(i<objarr[j].length){
				auto_draw(time)
				}
			else{ 
				j++;
				if(j<objarr.length){
					i=1;
					auto_draw(objarr[j].starttime-objarr[j-1].endtime)
				}
				else{
					
					ctx.clearRect(0,0,canvasWidth,canvasHeight);//清除canvas
					fenjie()
					}
				}
			},time)
			}
		auto_draw(0);
		
		function bihuaitem(arr){//保存一个笔画的png
			for(var i=0;i<arr.length-1;i++){
				drawFont(arr[i],arr[i+1]);
				}
			var src=canvas.toDataURL();
			imgarr.push(src);//将生成的一个图片 保存到数组里边
			ctx.clearRect(0,0,canvasWidth,canvasHeight);//清除canvas
			}
		
		function fenjie(){
			$('#controlbox').append('<div class="img"></div>')
			
			var deg=(360/objarr.length);
			for(var i=0;i<objarr.length;i++){
				bihuaitem(objarr[i])
				$('#controlbox').append()
				$('.img').append('<div class="img" style="background:url('+imgarr[i]+') no-repeat top center"></div>').removeClass('img')
				
				}
			$('#controlbox div').addClass('img')
			
			}
		
		})
var imgarr=[];
/*
    // Mobile端的触摸事件
    canvas.addEventListener("touchstart",function (ev) {
        var ev=ev?ev:window.event;
        drawStart(ev.touches[0]);
    },false);
    canvas.addEventListener("touchmove",function (ev) {
        var ev=ev?ev:window.event;
        if (isMouseDown) {
            drawMove(ev.touches[0]);
        }
    },false);
    canvas.addEventListener("touchend",function () {
         isMouseDown=false;;
        lastLineWidth=-1; // 鼠标抬起，恢复线宽
    },false);
	*/

}

</script>
</html>
